<template>
  <div class="shop">
    <p class="info_title">| 加盟信息</p>
    <div class="line"></div>


   <el-form :model="form"
          label-width="140px"
          class="demo-ruleForm">

  <el-form-item label="成为服务商时间：" >
    <p>{{form.created_at}}</p>
  </el-form-item>
  <el-form-item label="入驻成功时间：" >
     <p>{{form.settled_success_time}}</p>
  </el-form-item>
  <el-form-item label="邀请合伙人：" >
     <p>{{form.invitation_mobile}}</p>
  </el-form-item>
  <el-form-item label="邀请子账号：" >
     <p>{{form.invitation_mobile}}</p>
  </el-form-item>
  <el-form-item label="支付流水号：" >
     <p>---</p>
  </el-form-item>

  <p class="info_title" style="float:left;margin-right:12px;">| 资质信息</p><span class="sub_title">代理商信息完善成功后自动填充，支持本地修改</span>
  <div class="line"></div>

  <el-form-item label="服务商账号:" style="margin-top:20px;">
    <el-input size="mini"
    disabled
              v-model="form.join_mobile"
              style="width:494px;margin-left:12px;"
              placeholder="请输入服务商账号"></el-input>
  </el-form-item>

  <el-form-item label="推荐人账号：" prop="invitation_mobile">
            <el-input size="mini" disabled
              v-model="form.invitation_mobile"
              style="width:494px;margin-left:12px;"
              placeholder="请输入推荐人账号"></el-input>
          </el-form-item>
  <el-form-item label="姓名：" style="margin-top:20px;">
    <el-input size="mini" placeholder="请输入姓名" style='width:300px;margin-left:12px;' v-model="form.id_name"></el-input>
  </el-form-item>
    <el-form-item label="身份证号：" style="margin-top:20px;">
    <el-input size="mini" placeholder="请输入姓名" style='width:300px;margin-left:12px;' v-model="form.id_no"></el-input>
  </el-form-item>
  <el-form-item label="性别:" >
              <el-select placeholder="请下拉选择" v-model ='form.id_sex' size="mini" style="margin-left:12px;">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>

               <span style="color:#666;margin-right:8px;margin-left:36px;">民族:</span>
               <el-input size="mini" style="width:180px;margin-right:134px;" placeholder="请填写民族" v-model="form.id_nation"></el-input>

  </el-form-item>

    <el-form-item label="请选择出生年月:">
                <el-date-picker
      v-model="form.id_birth"
      type="date"
      size="mini"
      value-format="yyyy-MM-dd"
      style="margin-left:12px;"
      placeholder="选择日期">
    </el-date-picker>
          </el-form-item>


    <el-form-item label="家庭住址:" prop="addresss" style="position:relative;">
                  <el-select style="width:132px;margin-left:12px;"
          size='mini'
          v-model="province_id"
          filterable
          @change="onChangeProvince"
          class="select"
          placeholder="省份">

          <el-option v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>

          <el-select style="width:132px;"
          size='mini'
          v-model="city_id"
          filterable
          @change="onChangeCity"
          class="select"
          placeholder="市">
     <el-option v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>
                      <el-select style="width:132px;"
          size='mini'
          v-model="area_id"
          @change="onChangeDown"
          filterable
          class="select"
          placeholder="区/县">

    <el-option v-for="item in townAreaList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>


    <el-input v-model="form.address" size="mini" style="width:180px;" placeholder="请输入家庭住址"></el-input>
    <p style="margin-left:12px;color:#333;font-size:12px;">{{form.province+form.city+form.area+form.address}}</p>
    </el-form-item>
    <el-form-item label="缴费方式：">
       <el-select style="width:132px;" disabled=""
          size='mini'
          v-model="form.transfer_way">
         <el-option label="线上支付" value="1"></el-option>
         <el-option label="线下支付" value="5"></el-option>
       </el-select>
    </el-form-item>
  <el-form-item label="是否缴费："
            prop="is_reward" >
            <!-- <el-input size='mini'
              v-model="form.getFee"
              min='0'
              type="number"
              style="width:158px;margin-left:12px;"
              placeholder="应收金额"></el-input> -->

            <el-radio v-model="form.is_reward" label="1" :disabled='isDisabledReward'>是</el-radio>
            <el-radio v-model="form.is_reward" label="0" :disabled='isDisabledReward'>否</el-radio>
     </el-form-item>
  <el-form-item label="身份证：" class="tel_info">
      <uploadImg flieName="self_front_card"
              class="icon_cate"
              :oldImgs="[form.self_front_card]"
              :n="1"
              @getFile="getFile"></uploadImg>
  </el-form-item>
  <el-form-item label="营业执照：" class="tel_info">
    <uploadImg flieName="company_license"
              class="icon_cate"
              :oldImgs="[form.company_license]"
              :n="1"
              @getFile="getFile"></uploadImg>
  </el-form-item>
  </el-form>

  <div style="text-align:center;">
    <el-button type="primary" size="mini" @click="converseChangeService">保存修改</el-button>
  </div>


  <!--收回社区-->
  <jdialog title="新增服务商"
      :visible.sync="isShowCommity"
      width="400px">
    <div style="padding:20px;">
      <p  v-for='(item,index) in form.used_regions' :key="'s+' +item.id" class="select_name" >{{item.address}}<i class="el-icon-close" @click="cancelAddRegion(item.id,index)"> </i></p>
    </div>
  </jdialog>
  </div>
</template>

<script>

// import {serviceProviderUpdate,
// serviceProviderGetInformation,
//        serviceProviderFilterRegion} from '@/api/service'
// import uploadImg from "@/components/uploadImg";
export default {
  // components: {
  //   uploadImg
  // },
  data(){
    return {

      province_id:'',
      provinceList:[],

      city_id:'',
      cityList:[],

      area_id:'',
      townAreaList:[],

      town_id:'',
      streetList:[],
      streetAreaList:[],


      add_region_name:'',
      form:{
        used_regions:[],
       uid:'',
       serviceId:'',
       add_region_id:'',
       remove_region_ids:[],
       //成为服务商时间
       created_at:'',
       join_mobile:'',
       invitation_mobile:'',
       //入驻成功时间
       settled_success_time:'',
        //真实姓名
        id_name:'',
        id_no:'',
        id_sex:'',
        id_nation:'',
        id_birth:'',
        province:'',
        city:'',
        area:'',
        adcode:'',
        address:'',
        id_full_address:'',
        //应缴费
        //initial_money:'',
        //已缴费
        //actual_money:'',
        //代缴费
        //wait_money:'',
        is_reward:'',
         //身份证
        self_front_card:'',
        //营业执照
        company_license:'',
        //缴费方式
        transfer_way:'',
      },

      isShowCommity:false,
      isDisabledReward:false

    }
  },
  mounted(){
    this.form.serviceId = this.$route.query.serviceId
    this.form.join_mobile = this.$route.query.mobile
    if(this.form.serviceId){
      this.getserviceProviderGetInformationData()
    }
    this.getcommonChilderRegionList(1,0)
  },
  methods:{

       //切换省市
   onChangeProvince(e){
           this.city_id = this.area_id = ''
     this.getcommonChilderRegionList(2,e)
     this.provinceList.map(item => {
       if(item.id == e){
         this.form.province = item.name
       }
     })
     this.getcommonChilderRegionList(2,e)
   },
   onChangeCity(e){
     this.area_id = ''
          this.getcommonChilderRegionList(3,e)
               this.cityList.map(item => {
       if(item.id == e){
         this.form.city = item.name
       }
     })
   },
   //切换区
   onChangeDown(e){

     this.getcommonChilderRegionList(4,e)
        this.townAreaList.map(item => {
       if(item.id == e){
         this.form.area = item.name
         this.form.adcode = item.code

       }
     })
   },

   async  getcommonChilderRegionList(type,id){
    let res = await serviceProviderFilterRegion(id)
   if(type == 1){
      this.provinceList = res.data
   }
   if(type == 2){
      this.cityList = res.data
   }
   if(type == 3){
      this.townAreaList = res.data
   }
   if(type == 4){
     this.streetList = res.data
   }else if(type == 5){
     this.streetAreaList = res.data
   }
   },

   cancelRegion(){
    this.add_region_name = this.form.add_region_id = ''
   },
   //获取详细信息
   async getserviceProviderGetInformationData(){
      let res = await serviceProviderGetInformation(this.form.serviceId)
      if(res.code === 10000){
        // this.form.used_regions = res.data.used_regions
        this.form.uid =  res.data.sp.uid
        this.form.created_at = res.data.sp.created_at
        this.form.settled_success_time = res.data.settled_success_time
        this.form.invitation_mobile = res.data.invitation_mobile
        this.form.id_name = res.data.sp.id_name
        this.form.id_no = res.data.sp.id_no
        this.form.id_sex = res.data.sp.id_sex
        this.form.id_nation = res.data.sp.id_nation
        this.form.id_birth = res.data.sp.id_birth
        this.form.province = res.data.sp.province
        this.form.city = res.data.sp.city
        this.form.area = res.data.sp.area
        this.form.adcode = res.data.sp.adcode
        this.form.address = res.data.sp.address
        this.form.id_full_address = res.data.sp.id_full_address
        this.form.is_reward =String(res.data.sp.is_reward)
        this.form.self_front_card = res.data.sp.self_front_card
        this.form.company_license = res.data.sp.company_license
        this.form.transfer_way = String(res.data.sp.transfer_way)
        if(this.form.transfer_way == 1) {
          this.isDisabledReward = true
        }else{
             if(this.form.is_reward == '1'){
          this.isDisabledReward = true
        }else{
          this.isDisabledReward = false
        }
        }


      }else{
        this.$message.error(res.message)
      }
   },
    //保存修改
    converseChangeService(){
       this.getserviceProviderUpdateData()
    },
    //取消已选中区域
    cancelAddRegion(id,index){
      this.form.remove_region_ids.push(id)
     this.form.used_regions.splice(index,1)
    },
   //编辑社区服务商
   async getserviceProviderUpdateData(){

    let res = await serviceProviderUpdate({
      id:this.form.serviceId,
      uid:this.form.uid,
      join_mobile:this.form.join_mobile,
      invitation_mobile:this.form.invitation_mobile,
      contacts:'',
      is_reward:this.form.is_reward,
      company_license:this.form.company_license,
      self_front_card:this.form.self_front_card,
      id_no:this.form.id_no,
      id_name:this.form.id_name,
      id_sex:this.form.id_sex,
      id_nation:this.form.id_nation,
      id_birth:this.form.id_birth,
      id_full_address:this.form.province+this.form.city+this.form.area+this.form.address,
      province:this.form.province,
      city:this.form.city,
      area:this.form.area,
      address:this.form.address,
      adcode:this.form.adcode,
      transfer_way:this.form.transfer_way
    })

    if(res.code === 10000){
      this.$message.success(res.message)
      this.isDisabledReward = true
    }else{
      this.$message.error(res.message)
    }
   },
    getFile (file) {
      this.form[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },
  },

}
</script>

<style lang="scss" scoped>
.shop{
  padding: 20px;
  .info_title {
    font-weight: 700;
    font-size: 16px;
    margin-left: 12px;
  }
  .sub_title{
    font-size: 13px;
    color: #999999;
  }
  .line {
    height: 1px;
    width: 100%;
    background-color: #e5e5e5;
  }
  .time{
   margin-left: 20px;
    float: left;
    width: 45%;
  }
  .tel_info{
    float: left;
    width: 50%;
  }
  .select_name{
    font-size:12px;
    line-height: 20px;
    margin-left: 12px;
    margin-bottom: 12px;
    float:left;
    border: 1px solid #e5e5e5;
    color:#666666;
    .el-icon-close{
      margin-left:12px;
      color: #f4222d;
      cursor: pointer;
      // float: right;
    }
  }
  .demo-ruleForm{
    margin-top: 20px;
  }
  .province{
    position: absolute;
    z-index: 999;
    color: #999;
    font-size: 13px;
    margin-left: 15px;
  }
}
</style>
